<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加商品分类</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //添加按钮点击响应事件
        $("#insert").click(function (){
            //获取页面数据并去除空格
            let inputGoodstypeName = $.trim($("#inputGoodstypeName").val());
            let inputGoodstypeDescribe = $("#inputGoodstypeDescribe").val();
            //判断商品分类名是否有空值
            if (inputGoodstypeName != ""){
                //向后端发送数据
                $.ajax({
                    url:"/admin/goodstype/insert",
                    method:"POST",
                    data:{"goodstypeName":inputGoodstypeName,"goodstypeDescribe":inputGoodstypeDescribe},
                    success:function (getData){
                        if (getData){
                            location.href = "/admin/goodstype";
                        }else {
                            $("#modalText").text("有重复分类名！");
                            $("#myModal").modal('show');
                        }
                    }
                })
            }else {
                $("#modalText").text("分类名不能为空！");
                $("#myModal").modal('show');
            }
        })

        //重置按钮点击响应事件
        $("#reset").click(function (){
            //将页面文本框内容清空
            $("#inputGoodstypeName").val(null);
            $("#inputGoodstypeDescribe").val(null);
        })
    })
</script>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <form>
                <div class="form-group">
                    <label for="inputGoodstypeName">分类名称</label>
                    <input type="text" class="form-control" id="inputGoodstypeName" placeholder="请输入分类名称">
                </div>
                <div class="form-group">
                    <label for="inputGoodstypeDescribe">分类描述</label>
                    <textarea class="form-control" id="inputGoodstypeDescribe" rows="3"></textarea>
                </div>

                <button id="insert" type="button" class="btn btn-primary">添加</button>
                <button id="reset" type="button" class="btn btn-primary">重置</button>
            </form>
        </main>
    </div>
</div>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>